<template>
	<jk-dialog
		v-model="compositionDialogVisible"
		title="选择并线原料"
		width="1000px"
		@on-confirm="onConfirmComposition"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<batch-item-material-list
			v-if="compositionDialogVisible"
			:key="compositionDialogKey"
			ref="batchItemMaterialListDialog"
			is-sub-dialog
			:total-quantity="compositionTotalQuantity"
			:material-list="{
				totalQuantity: compositionTotalQuantity,
				productOrderElementItemLists: compositionTableData,
			}"
			:color-list="colorList"
			:rule-form="ruleForm"
			@return-data="onCompositionDataReturn"
		/>
	</jk-dialog>
</template>

<script>
    export default {
        name: 'BatchItemMaterialListDialog',
        components: {
            BatchItemMaterialList: () => import('./batch-item-material-list')
        },
        props: {
            colorList: {
                type: Array,
                default: () => []
            },
            ruleForm: {
                type: Object,
                default: () => ({})
            },
            tableData: {
                type: Array,
                default: () => []
            }
        },

        data() {
            return {
                compositionDialogKey: 0,
                compositionDialogVisible: false,
                compositionTableData: [],
                compositionTotalQuantity: 0,
                selectedRowIndex: null
            };
        },
        // mounted() {
        //     console.log('组件是否存在：', this.$options.components);
        // },

        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    // this.compositionDialogData = {
                    //     visible: false,
                    //     rowIndex: null,
                    //     rowData: null
                    // };
                    Object.assign(this.$data, this.$options.data());
                }
                this.$refs.compositionDialog = null;
            },
            openCompositionDialog(row, rowIndex, tableData) {
                this.selectedRowIndex = rowIndex;
                this.compositionTotalQuantity = row.number || 0;
                this.compositionTableData = JSON.parse(JSON.stringify(tableData)); // 回填
                this.compositionDialogKey++; // 强制刷新子组件
                this.compositionDialogVisible = true;
            },
            onCompositionDataReturn(data) {
                this.compositionTableData = data.productOrderElementItemLists || [];
            },
            onConfirmComposition() {
                const subList = this.compositionTableData;
                if (this.selectedRowIndex !== null) {
                    const { valid, errors } =
                        this.$refs.batchItemMaterialListDialog.validateBeforeSubmit(
                            this.compositionTableData,
                            this.compositionTotalQuantity
                        );
                    if (!valid) {
                        this.$tipsBar(this, 'custom', 'warning', errors.join(';'));
                        this.saveBtnLoading = false;
                        this.showContentLoading = false;
                        return;
                    }
                    this.$emit(
                        'update-composition',
                        this.selectedRowIndex,
                        subList
                    );
                }
                this.compositionDialogVisible = false;
            }
        }
    };
</script>
